<template>
	<view class="container">
		<!-- 蓝色头部 -->
		<view class="header">
			<view class="nav-bar">
				<uni-icons type="left" size="24" color="#fff" @click="goBack"></uni-icons>
				<text class="nav-title">导航</text>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content-area">
			<!-- 白色卡片容器（包含地图和底部信息） -->
			<view class="map-wrapper">
				<!-- 地图外层盒子 -->
				<view class="map-outer-box">
					<!-- 地图区域 -->
					<view class="map-container">
						<map class="map" :latitude="latitude" :longitude="longitude" :markers="markers" :scale="scale"
							:show-location="true" @tap="onMapTap"></map>
					</view>
				</view>

				<!-- 底部信息卡片 -->
				<view class="bottom-card">
					<view class="store-info">
						<text class="store-name">{{ storeInfo.name || '门店名称' }}</text>
						<text class="store-address">{{ storeInfo.address || '门店地址' }}</text>
					</view>
					<view class="nav-button" @click="startNavigation">
						<text class="nav-button-text">导航</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'

	// 门店信息
	const storeInfo = ref({
		name: '',
		address: '',
		latitude: 35.2219,
		longitude: 113.2408
	})

	// 地图中心点坐标（默认使用门店坐标）
	const latitude = ref(35.2219)
	const longitude = ref(113.2408)

	// 地图缩放级别
	const scale = ref(16)

	// 当前位置
	const currentLatitude = ref(0)
	const currentLongitude = ref(0)

	// 地图标记点
	const markers = ref([])

	// 返回上一页
	const goBack = () => {
		uni.navigateBack()
	}

	// 显示菜单
	const showMenu = () => {
		uni.showActionSheet({
			itemList: ['切换地图类型', '分享位置'],
			success: (res) => {
				if (res.tapIndex === 0) {
					uni.showToast({
						title: '切换地图类型',
						icon: 'none'
					})
				} else if (res.tapIndex === 1) {
					uni.showToast({
						title: '分享位置',
						icon: 'none'
					})
				}
			}
		})
	}

	// 定位当前位置
	const locateCurrentPosition = () => {
		uni.getLocation({
			type: 'gcj02',
			success: (res) => {
				currentLatitude.value = res.latitude
				currentLongitude.value = res.longitude

				// 更新标记
				initMarkers()
				// 调整地图视图
				adjustMapView()

				uni.showToast({
					title: '定位成功',
					icon: 'success',
					duration: 1000
				})
			},
			fail: (err) => {
				console.log('定位失败', err)
				uni.showToast({
					title: '定位失败，请检查定位权限',
					icon: 'none',
					duration: 2000
				})
			}
		})
	}

	// 地图点击事件
	const onMapTap = (e) => {
		console.log('地图点击', e)
	}

	// 开始导航
	const startNavigation = () => {
		// 调用系统地图导航
		uni.openLocation({
			latitude: storeInfo.value.latitude,
			longitude: storeInfo.value.longitude,
			name: storeInfo.value.name,
			address: storeInfo.value.address,
			success: () => {
				console.log('打开地图导航成功')
			},
			fail: (err) => {
				console.log('打开地图导航失败', err)
				uni.showToast({
					title: '打开地图失败',
					icon: 'none'
				})
			}
		})
	}

	// 初始化地图标记
	const initMarkers = () => {
		const markerList = []

		// 添加门店标记（目的地）
		if (storeInfo.value.latitude && storeInfo.value.longitude) {
			markerList.push({
				id: 1,
				latitude: storeInfo.value.latitude,
				longitude: storeInfo.value.longitude,
				iconPath: '/static/repair/位置 拷贝 6@3x.png',
				width: 40,
				height: 40,
				callout: {
					content: storeInfo.value.name || '目的地',
					color: '#333',
					fontSize: 14,
					borderRadius: 8,
					bgColor: '#fff',
					padding: 8,
					display: 'ALWAYS'
				}
			})
		}

		// 如果有当前位置，添加当前位置标记
		if (currentLatitude.value && currentLongitude.value) {
			markerList.push({
				id: 2,
				latitude: currentLatitude.value,
				longitude: currentLongitude.value,
				iconPath: '/static/repair/位置 拷贝 6@3x.png',
				width: 30,
				height: 30
			})
		}

		markers.value = markerList
	}

	// 调整地图视图以包含所有标记点
	const adjustMapView = () => {
		// 如果有当前位置和门店位置，计算中心点
		if (currentLatitude.value && currentLongitude.value && storeInfo.value.latitude && storeInfo.value.longitude) {
			// 计算两个点的中心点
			latitude.value = (currentLatitude.value + storeInfo.value.latitude) / 2
			longitude.value = (currentLongitude.value + storeInfo.value.longitude) / 2
			// 调整缩放级别，使两个点都能看到
			scale.value = 13
		} else if (storeInfo.value.latitude && storeInfo.value.longitude) {
			// 只有门店位置，以门店为中心
			latitude.value = storeInfo.value.latitude
			longitude.value = storeInfo.value.longitude
			scale.value = 16
		} else if (currentLatitude.value && currentLongitude.value) {
			// 只有当前位置，以当前位置为中心
			latitude.value = currentLatitude.value
			longitude.value = currentLongitude.value
			scale.value = 15
		}
	}

	// 页面加载
	onMounted(() => {
		// 从本地存储获取门店信息
		const storedStore = uni.getStorageSync('navigationStoreInfo')
		if (storedStore) {
			storeInfo.value = {
				name: storedStore.name || '',
				address: storedStore.address || '',
				latitude: storedStore.latitude || 35.2219,
				longitude: storedStore.longitude || 113.2408
			}
			latitude.value = storeInfo.value.latitude
			longitude.value = storeInfo.value.longitude

			// 清除存储
			uni.removeStorageSync('navigationStoreInfo')
		}

		// 获取当前位置
		uni.getLocation({
			type: 'gcj02',
			success: (res) => {
				currentLatitude.value = res.latitude
				currentLongitude.value = res.longitude
				// 初始化标记
				initMarkers()
				// 调整地图视图
				adjustMapView()
			},
			fail: (err) => {
				console.log('获取位置失败', err)
				// 即使定位失败，也初始化门店标记
				initMarkers()
				// 调整地图视图
				adjustMapView()
			}
		})
	})
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100vh;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	/* 蓝色头部 */
	.header {
		width: 100%;
		height: 500rpx;
		background-color: #3486fe;
		padding-top: calc(var(--status-bar-height) - 40rpx);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		height: 88rpx;
		position: relative;
		z-index: 120;
	}

	.nav-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		pointer-events: none;
	}

	.nav-right {
		display: flex;
		align-items: center;
		gap: 20rpx;
		margin-left: auto;
	}

	/* 内容区域 */
	.content-area {
		margin-top: calc(var(--status-bar-height) + 88rpx - 40rpx);
		padding-top: 40rpx;
		position: relative;
		z-index: 10;
		height: calc(100vh - var(--status-bar-height) - 88rpx + 40rpx);
	}

	/* 白色卡片容器（地图模块） */
	.map-wrapper {
		margin: 0 calc(15rpx + 25rpx);
		margin-top: 10rpx;
		position: relative;
		z-index: 110;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		width: calc(100% - 30rpx - 50rpx);
		height: calc(100% - 10rpx - 50rpx);
		box-sizing: border-box;
	}

	/* 地图外层盒子 */
	.map-outer-box {
		margin: 15rpx;
		padding: 15rpx;
		flex: 1;
		box-sizing: border-box;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	/* 地图容器 */
	.map-container {
		width: 100%;
		height: 100%;
		position: relative;
		box-sizing: border-box;
	}

	.map {
		width: 100%;
		height: 100%;
	}

	/* 底部信息卡片 */
	.bottom-card {
		width: 100%;
		background-color: #fff;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-shrink: 0;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

	.store-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-right: 20rpx;
	}

	.store-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}

	.store-address {
		font-size: 24rpx;
		color: #666;
		line-height: 1.5;
	}

	.nav-button {
		background-color: #3486fe;
		border-radius: 50rpx;
		padding: 20rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-button-text {
		color: #fff;
		font-size: 28rpx;
		font-weight: bold;
	}
</style>